import React from 'react';
import {Row, Col, Button, Modal, Table} from 'antd';
import "../Table/react-bootstrap-table.min.css"
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import {getItems} from "../../services/dictionaryServer";
import {getDic} from "../../services/dictionaryServer";

class DicListModalContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      dic: {
        id: '',
        name: '',
        comment: ''
      },
      items: []
    };
  }

  initItems(dicId) {

    getDic(dicId).then(function (json) {
      if (json) {
        this.setState({
          dic: json
        });
      }
    }.bind(this));
    getItems(dicId).then(function (json) {
      if (json) {
        this.setState({
          items: json
        });
      }
    }.bind(this));

  }

  handleCancel() {
    this.setState({
      dic: {
        id: '',
        name: '',
        comment: ''
      },
      items: [],
      visible: false,
    });
  }

  render() {
    const {items, visible, dic} = this.state;

    return (
      <Modal ref="dics"
             visible={visible}
             width="720"
             title={dic.name} onCancel={this.handleCancel.bind(this)}
             footer={[
               <Button key="back" type="ghost" onClick={this.handleCancel.bind(this)}>
                 返 回</Button>
             ]}
      >
        <div>
          <Row>
            <Col span={24}>{dic.comment}</Col>
          </Row>
          <Row>
            <Col span={24}>
              <BootstrapTable data={ items } height='350'>
                <TableHeaderColumn dataField='id' isKey={ true } hidden={ true }>编号</TableHeaderColumn>
                <TableHeaderColumn dataField='value' width='100'>取值</TableHeaderColumn>
                <TableHeaderColumn dataField='engName' width='100'>英文名</TableHeaderColumn>
                <TableHeaderColumn dataField='name' width='120'>名称</TableHeaderColumn>
                <TableHeaderColumn dataField='note'>说明</TableHeaderColumn>
              </BootstrapTable>
            </Col>
          </Row>
        </div>
      </Modal>
    );
  }
}

export default DicListModalContainer;
